<script setup>
import {  ElMessage } from 'element-plus'
import { friendList, groupUserList, userId, userName, userHeadShot, me } from '@/stores/user'
import { type, groupName, create, revert } from '@/stores/page'
import { getFriendHeadShot } from '@/stores/getFriend'


//重置表单
function reset(){
    groupUserList.value = [me.value]
    groupName.value = ""
    type.value = 0
    console.log("reset")
}

//判断群聊创建是否合法
function judgeLegal(){
    if(groupName.value.trim().length === 0 || groupName.value.trim().length > 8){
        ElMessage.error('群聊名称不能为空且不能超过8个字符')
    }
    else if(groupUserList.value.length < 3){
        ElMessage.error('群聊人数少于3人')
    }
    else{
        revert()
        create()
    }
}

</script>

<template>
    <el-form
      style="max-width: 600px"
      label-width="auto"
      status-icon
      @submit.prevent
    >
    <div>
      <el-form-item label="群聊名称"  >
        <el-input v-model="groupName" placeholder="请输入群聊名称"/>
      </el-form-item>
      <div v-if="type === 0">
        <el-button type="success" @click="type = 1">添加成员</el-button>
        <el-scrollbar height="400px">
            <div style="color:black; font-size:20px">已有成员</div>
            <div v-for="item in groupUserList" :key="item.id" class="scrollbar-demo-item">
              <div v-if="item.id === userId">
                <el-avatar shape="square" :size="40" :src="getFriendHeadShot(item.headShotUrl)" style="margin-left:150%;margin-top:25%"/>
              </div>
              <div v-else>
                <el-avatar shape="square" :size="40" :src="getFriendHeadShot(item.headShotUrl)" style="margin-left:150%;margin-top:25%"/>
              </div>
                <div v-if="item.id === userId" style="color:red; margin-left:30%">群主:{{ item.name }}</div>
                <div v-else style="margin-left:30%">{{ item.name }}</div>
            </div>
        </el-scrollbar>
        <el-button type="primary" :plain="true"  @click="judgeLegal()">创建</el-button>
      </div>
      <div v-else-if="type === 1">
        <el-button type="success" @click="type = 0">确定</el-button>
        <el-scrollbar height="400px">
          <el-checkbox-group v-model="groupUserList">
            <div v-for="item in friendList" :key="item" class="scrollbar-demo-item">
                <el-checkbox  size="large" :value="item" :router="true" style="left:5%"/>
                <!-- {{ console.log(groupUserList) }} -->
                <el-avatar shape="square" :size="40" :src="getFriendHeadShot(item.headShotUrl)" style="left:35%;"/>
                <label style="margin-left:10%">{{ item.name }}</label>
            </div>
          </el-checkbox-group>
        </el-scrollbar>
      </div>
      <el-button @click="reset()">重置</el-button>
    </div>
    </el-form>
  </template>


<style scoped>
button{
    color:black;
    margin-bottom : 10px;
    height : 40px;
    width : 100px;
}

.scrollbar-demo-item {
  display: flex;
  align-items: center;
  justify-content: left;
  height: 50px;
  margin: 10px;
  width:300px;
  text-align: center;
  margin-left:150px;
  border-radius: 4px;
  font-size : 20px;
  color : black;
  background-color : rgb(223, 220, 217);
}
</style>
  

